import styles from './index.module.less';

import React from 'react';
import { useNavigate } from 'react-router-dom';

import { message } from '@/App';
import { login } from '@/api/system';
import userStore from '@/stores/user';

import BackgroundScene from './BackgroundScene';

const Login = () => {
  const navigate = useNavigate();
  const setUser = userStore(state => state.setUser);

  const onClick = async () => {
    const { data } = await login({ username: 'wind', password: '123' });
    const { token, userInfo } = data;
    setUser(token, userInfo);
    message.success('登录成功');
    navigate('/');
  };

  return (
    <div className={styles.login}>
      <div className={styles.loginScene}>
        <BackgroundScene />
      </div>
      <div className={styles.loginBtn} onClick={onClick}>
        登录
      </div>
    </div>
  );
};

export default Login;
